<template>
    <div class="hami-header">
        <div class="hami-header-title">{{title}}</div>
        <slot></slot>
        <div class="hami-header-r">
            <div class="hami-header-user">
                <!--<span>{{userInfo.depName}}</span>-->
                <!-- TODO 头像：pictureid -->
                <span class="hami-header-username">{{userInfo.realname}}</span>
            </div>
            <!--<div class="hami-header-btn _pwd"
                 @click="fEditPwd">修改密码</div>-->
            <div class="hami-header-btn _logout"
                 @click="fLogout">安全退出</div>
        </div>
        <wiv-dialog title="修改密码"
                    width="500px"
                    :visible.sync="bDialogVisible">
            <div class="wiv-dialog">
                <div class="wiv-dialog-body">
                    <el-form :model="oForm"
                             :rules="oRules"
                             label-width="100px"
                             class="hami-form"
                             ref="form">
                        <el-form-item label="原密码"
                                      prop="oldpwd">
                            <el-input v-model="oForm.oldpwd"
                                      show-password
                                      autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="新密码"
                                      prop="newpwd">
                            <el-input v-model="oForm.newpwd"
                                      show-password
                                      autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="确认新密码"
                                      prop="newpwd2">
                            <el-input v-model="oForm.newpwd2"
                                      show-password
                                      autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="wiv-dialog-foot">
                    <el-button type="primary"
                               @click="fDialogConfirm">确 定</el-button>
                    <el-button @click="bDialogVisible = false">取 消</el-button>
                </div>
            </div>
        </wiv-dialog>
    </div>
</template>

<script>
    export default {
        name: 'HamiHeader',
        props: {
            title: {
                type: String,
                default: '项目名称'
            },
            userInfo: {
                type: Object
            }
        },
        data() {
            var fValidatePwd = (rule, value, callback) => {
                if (this.oForm.newpwd2) {
                    this.$refs.form.validateField('newpwd2');
                }
                callback();
            };
            var fValidatePwd2 = (rule, value, callback) => {
                if (this.oForm.newpwd !== this.oForm.newpwd2) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                bDialogVisible: false,
                oForm: {},
                oRules: { // 基本信息表单验证
                    oldpwd: [{ required: true, message: '此字段必填', trigger: 'blur' }],
                    newpwd: [
                        { required: true, message: '此字段必填', trigger: 'blur' },
                        { validator: fValidatePwd, trigger: 'blur' }
                    ],
                    newpwd2: [
                        { required: true, message: '此字段必填', trigger: 'blur' },
                        { validator: fValidatePwd2, trigger: 'blur' }
                    ]
                }
            }
        },
        mounted() {

        },
        methods: {
            fEditPwd() {// 修改密码按钮点击
                this.oForm = {};
                this.bDialogVisible = true;
            },
            fLogout() {// 安全退出按钮点击
                this.$emit('logout-click')
            },
            fDialogConfirm() {// 修改密码弹框确定按钮点击
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.fSubmit()
                    } else {
                        return false;
                    }
                });
            },
            fSubmit() {
                this.$WIV.fRequest({
                    url: this.$HAMI_URLS.URLS_PERSON.d_changepwd,
                    data: {
                        oldPassword: this.oForm.oldpwd,
                        newPassword: this.oForm.newpwd
                    }
                }, {
                    argToJson: true
                }).then(({ data: res }) => {
                    this.bDialogVisible = false;
                    this.$alert('密码修改成功，请重新登录!', {
                        showClose: false
                    }).then(() => {
                        this.$emit('logout-click')
                    });
                });
            }
        }
    };
</script>

<style lang="less">
    .hami-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 80px;
        padding: 0 20px;
        background: #409eff;
        color: #fff;
    }
    .hami-header-title {
        display: flex;
        align-items: center;
        font-size: 30px;
    }
    .hami-header-r {
        display: flex;
        align-items: center;
        font-size: 18px;
    }
    .hami-header-user {
        display: flex;
        align-items: center;
        height: 50px;
        padding: 0 30px;
        margin: 0 15px;
        border-right: 1px solid #fff;
    }
    .hami-header-username {
        margin-left: 10px;
        color: #ffde06;
    }
    .hami-header-btn {
        padding: 15px;
        cursor: pointer;
        &:hover {
            opacity: 0.75;
        }
    }
</style>
